<%@page import="recommend.RecommendHelper"%>
<%@page import="entities.CommentEntity"%>
<%@page import="service.CommentService"%>
<%@page import="entities.CommentCount"%>
<%@page import="service.SellerService"%>
<%@page import="entities.SellerEntity"%>
<%@page import="util.Util"%>
<%@page import="service.GoodsService"%>
<%@page import="entities.GoodsEntity"%>
<%@ page language="java" import="java.util.*,java.math.BigDecimal;"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String userName = (String)session.getAttribute("userName");
	String goodsId = request.getParameter("goodsId");
	//商品实体
	GoodsEntity goods = null;
	//商家实体
	SellerEntity seller = null;
	//获得评论信息
	CommentCount comment_count = null;
	if (goodsId != null) {
		goods = GoodsService.getPointGoods(Integer.parseInt(goodsId
		.trim()));
		seller = SellerService.getSellerById(goods.getSellerId());
		comment_count = CommentService.getCommentCount(goodsId);
	}
%>
<!DOCTYPE HTML >
<html>
<head>
<title><%=goods.getName()%></title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/GlobalFunction.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/goodsDetail.css">
<style type="text/css">
/* star即时评分 */
#star {
	position: relative;
	width: 600px;
	margin: 5px 0 0 0;
	height: 28px;
}

#star ul,#star span {
	float: left;
	display: inline;
	height: 19px;
	line-height: 19px;
}

#star ul {
	margin: 0 6px;
}

#star li {
	float: left;
	width: 24px;
	cursor: pointer;
	text-indent: -9999px;
	background: url(images/star.png) no-repeat;
}

#star strong {
	color: #f60;
	padding-left: 10px;
}

#star li.on {
	background-position: 0 -28px;
}

#star p {
	font-size: 12px;
	position: absolute;
	top: 20px;
	line-height: 16px;
	width: 159px;
	height: 60px;
	display: none;
	background: url(images/icon.gif) no-repeat;
	padding: 10px 10px 0;
}

#star p em {
	color: #f60;
	display: block;
	margin-bottom: 2px;
	font-style: normal;
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		$(".hide").click(function() {
			//$("#first").toggle();
			$(".comments").toggle("slow");
		});
	});
	window.onload = function() {

		var oStar = document.getElementById("star");
		var aLi = oStar.getElementsByTagName("li");
		var oUl = oStar.getElementsByTagName("ul")[0];
		var oSpan = oStar.getElementsByTagName("span")[1];
		var oP = oStar.getElementsByTagName("p")[0];
		var i = iScore = iStar = 0;
		var aMsg = [ "很不满意|难吃的要死，又贵，再也不吃了，非常不满", "不满意|不好吃，下次不吃了，呜呜，不满意",
				"一般|能吃，当时没有想象中的那么好，偶尔吃吃还行", "满意|不错，菜做得挺好的，价格也还好，还是挺满意的",
				"非常满意|物美价廉的东东啊，吃了还想吃，非常满意" ]

		for (i = 1; i <= aLi.length; i++) {
			aLi[i - 1].index = i;

			//鼠标移过显示分数
			aLi[i - 1].onmouseover = function() {
				fnPoint(this.index);
				//浮动层显示
				oP.style.display = "block";
				//计算浮动层位置
				oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth
						- 104 + "px";
				//匹配浮动层文字内容
				oP.innerHTML = "<em><b>" + this.index + "</b> 分 "
						+ aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>"
						+ aMsg[this.index - 1].match(/\|(.+)/)[1]
			};

			//鼠标离开后恢复上次评分
			aLi[i - 1].onmouseout = function() {
				fnPoint();
				//关闭浮动层
				oP.style.display = "none"
			};

			//点击后进行评分处理
			aLi[i - 1].onclick = function() {
				iStar = this.index;
				oP.style.display = "none";
				oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> ";
			}
		}

		//评分处理
		function fnPoint(iArg) {
			//分数赋值
			iScore = iArg || iStar;
			for (i = 0; i < aLi.length; i++)
				aLi[i].className = i < iScore ? "on" : "";
		}

	};
</script>
</head>

<body>
	<jsp:include page="header.jsp"></jsp:include>
	<div id="goodsId" style="height: 20px;visibility: hidden;"><%=goodsId%></div>
	<div id="userName" style="display: none;"><%=userName%></div>
	<div id="content">
		<div class="layer" id="mblogdetail">
			<div class="tube tube-a">
				<div class="block" id="detailcnt">
					<div class="center">
						<div class="section">
							<div class="userinfo clr">
								<!-- 商家图片 -->
								<a class="avatar" href="menu.jsp?sellerId=<%=goods.getSellerId() %>"> <img
									src="<%=seller.getLogoURL()%>" width="80" height="48"> </a>
								<!-- 商品所属商家-->
								<h2>
									本商品来自 <a class="name" href="menu.jsp?sellerId=<%=goods.getSellerId() %>"
										title="<%=seller.getName()%>"><%=seller.getName()%></a> <span>
										，发布于 </span><i><%=goods.getOnSaleTime()%></i>
								</h2>
							</div>
							<div class="article clr" id="article">
								<div class="detailinfo" id="detailinfo">
									<p class="detail">
										<!-- 商品图片 -->
										<a class="shownext"
											title="<%=goods.getName()%>"> <img
											src="<%=goods.getImageUrl()%>" height="366" width="466">
										</a>
									</p>
									<!-- 商品介绍 -->
									<div class="desc">
										<i class="ql">&nbsp;</i> 简介：
										<h1><%=goods.getDescrition()%></h1>
									</div>
								</div>
								<div class="goodsInfo">
									<div class="goodsName">
										<%=goods.getName()%>
										<span class="sale"> 销售：</span><span class="saleCount"><%=goods.getSaleCount()%></span>
									</div>
									<div class="info_d">
										类别：<span><%=goods.getClassName()%></span>
									</div>
									<div class="info_d">
										关键字：<span><%=goods.getKeyWords()%></span>
									</div>
									<div class="info_d score">
										<p>评分：</p>
										<dl>
											<%
												int score = new BigDecimal(goods.getRank() + "").setScale(0,
													BigDecimal.ROUND_HALF_UP).intValue();
												for (int i = 1; i <= score; i++) {
												%>
												<dt class="on"><%=i%></dt>
												<%
												}
											for (int i = 1; i <= 5 - score; i++) {
											%>
											<dt><%=(5 - score)%></dt>
											<%
												}
											%>
										</dl>
										<span><%=goods.getRank()%></span>
									</div>
									<div class="info_d">
										<span style="color:red;font-size: large;font-weight: bold;">￥<%=goods.getPrice() %></span>
										<%if(goods.getState()==1){ %>
										<a href="javascript:;"
											title='<%=(session.getAttribute("userName")==null)?"请登录后购买":"购买"%>'
											class="buy" id="buy">购买</a>
										<%} %>
									</div>
									<div class="info_d">
										<!-- JiaThis Button BEGIN -->
										分享到：
										<div style="border: none;" class="jiathis_style">
											<span class="jiathis_txt">&nbsp;&nbsp;</span><a
												class="jiathis_button_icons_1"></a> <a
												class="jiathis_button_icons_2"></a> <a
												class="jiathis_button_icons_3"></a> <a
												class="jiathis_button_icons_4"></a> <a
												href="http://www.jiathis.com/share"
												class="jiathis jiathis_txt jtico jtico_jiathis"
												target="_blank"></a> <a class="jiathis_counter_style"></a>
										</div>

										<script type="text/javascript">
											var jiathis_config = {
												url : "<%=basePath%>goodsDetail.jsp?goodsId=<%=goodsId%>",
												summary : "<%=goods.getDescrition()%>",
												title : "我在华大#外卖街#网站上看到了一个不错的菜--<%=goods.getName()%>,大家都来品尝啊。",
												hideMore : false
											}
										</script>
										<script type="text/javascript"
											src="http://v3.jiathis.com/code/jia.js?uid=1360374582471645"
											charset="utf-8"></script>
										<!-- JiaThis Button END -->
									</div>
								</div>
							</div>
							<div class="replyinfo">
<%if(userName != null && GoodsService.isBuy(userName,goods.getId())) {%>
								<div id="js-reply-area" class="reply-area">
									<form id="js-form-cmt-reply"
										action="http://www.duitang.com/comment/add/" method="post">
										<dl class="reply-input clr">
											<dt class="cmt-avatar">
												<a>评论标题： </a>
											</dt>
											<dd>
												<input id="comment_title" class="textBox" type="text" value="" width="250px;">
											</dd>
											<dt class="cmt-avatar">
												<a>评论内容： </a>
											</dt>
											<dd class="reply-text pr">
												<textarea id="comment_content" name="comment_content"
													class="txa" style="height: 42px;"> </textarea>
											</dd>
											<div id="star">
												<span>打分:</span>
												<ul>
													<li><a href="javascript:;">1</a></li>
													<li><a href="javascript:;">2</a></li>
													<li><a href="javascript:;">3</a></li>
													<li><a href="javascript:;">4</a></li>
													<li><a href="javascript:;">5</a></li>
												</ul>
												<span id="comment_score"></span>
												<p></p>
											</div>
											<!--star end-->
											<dd class="reply-sub clr">
												<a class="abtn" id="sure_comment" href="javascript:void(0);">确定打分与评论 </a>
											</dd>
										</dl>
									</form>
								</div><%} %>
								<!-- 评论 -->
								<div id="cmt-count">
									共 <span style="color: red"><%=comment_count.getAll_star()%></span>
									条评论 <a href="javascript:void(0);" class="hide"> 隐藏/显示</a>
								</div>
								<%
									if (comment_count.getAll_star() != 0) {
										List<CommentEntity> comments = new ArrayList<CommentEntity>();
										comments = CommentService.getComment(goodsId, 0 + "", 5 + "");
								%>
								<!-- 评论列表 begin -->
								<div class="comments">
									<ul class="comment_list">
										<%
											for (int i = 0; i < comments.size(); i++) {
										%>
										<li class="comment"><img class="head" src="<%=comments.get(i).getUserHead() %>" alt="<%=comments.get(i).getUserName()%>">
											<p class="sms">
												<a><%=comments.get(i).getUserName()%></a>
												: <span class="comment_title"><%=comments.get(i).getTitle()%></span><span>&nbsp;&nbsp;&nbsp;打分：<b
													style="color: red;"><%=comments.get(i).getRank()%></b> </span>
											</p>
											<p class="sms"><%=comments.get(i).getContent()%><span>&nbsp;&nbsp;&nbsp;<%=comments.get(i).getTime()%></span>
											</p>
											<div>
												<a href="javascript:;">举报</a> <a href="javascript:;">回复</a>
											</div></li>
										<%
											}
										%>
									</ul>
									<div class="pagination">
										<%
										for (int i = 0; i < (comment_count.getAll_star() % 5 == 0 ? comment_count .getAll_star() / 5 : comment_count.getAll_star() / 5 + 1); i++) {
											if (i == 0) {
										%>
										<a class="c" href="javascript:;"><%=i + 1%></a>
										<%
											} else {
										%>
										<a href="javascript:;"><%=i + 1%></a>
										<%
											}
																																																																				}
										%>
									</div>
								</div>
								<!-- 评论列表 end -->
								<%
									}
								%>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div class="tube tube-b">
				<div class="block">
					<div class="otheralbums">
						<h4>同类商品推荐 &gt;&gt;</h4>
						<ul class="oblbums">
						<%  List<GoodsEntity> gClsList = new ArrayList<GoodsEntity>();
							gClsList = GoodsService.getClassGoods(goods.getClassId()+"", "3");	
						    for(GoodsEntity g : gClsList){
						 %>
							<li><a class="obimg" href="goodsDetail.jsp?goodsId=<%=g.getId()%>"> <img src="<%=g.getImageUrl() %>"
									width="64" height="64" alt="<%=g.getName()%>"> </a> <a class="db"
								href="goodsDetail.jsp?goodsId=<%=g.getId()%>" title="<%=g.getName()%> "><%=g.getName()%> </a>
								<div class="clr">
									<span class="sale"> 销售：</span><span class="saleCount"><%=g.getSaleCount()%></span>
								</div>
							</li>
						<%} %>
						</ul>
					</div>
					<div style="height: 30px;"></div>
					<div class="otheralbums">
						<h4>猜你喜欢 &gt;&gt;</h4>
						<ul class="oblbums">
						<%  List<GoodsEntity> gRcmdGoods = new ArrayList<GoodsEntity>();
							gRcmdGoods = RecommendHelper.getRecommendGoods(userName, 2);
						    for(GoodsEntity g : gRcmdGoods){
						 %>
							<li><a class="obimg" href="goodsDetail.jsp?goodsId=<%=g.getId()%>"> <img src="<%=g.getImageUrl() %>"
									width="64" height="64" alt="<%=g.getName()%>"> </a> <a class="db"
								href="goodsDetail.jsp?goodsId=<%=g.getId()%>" title="<%=g.getName()%> "><%=g.getName()%> </a>
								<div class="clr">
									<span class="sale"> 销售：</span><span class="saleCount"><%=g.getSaleCount()%></span>
								</div>
							</li>
						<%} %>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="footer.jsp"></jsp:include>
	<script type="text/javascript">
		$(document).ready(function() {
		
			//浏览历史记录	
			var userName = $("#userName").html().trim();
			var goodsId= $("#goodsId").html();
			$.ajax({
				type : "POST",
				url : "servlet/ScanServlet",
				data : "action=add&goodsId="+goodsId+"&userName=" +userName,
				success : function(result) {
					var result= result.trim();
					if(result=="success"){
					}else{
						alert("商品添加到历史记录失败，请重试！");
					}
				}
			});
			
			$(".pagination a").click(function() {
				var goodsId = $("#goodsId").html().trim();
				var page = $(this).html().trim();
				$.ajax({
					type : "POST",
					url : "servlet/CommentServlet",
					data : "action=get&goods_id="+ goodsId+ "&start="+ (page - 1)* 5+ "&count=5",
					dataType : "json",
					success : function(result) {
						$(".comment_list").html("");
						$.each(result,function(key,value) {
							var commnetHtml = "<li class='comment'><img class='head' src='"+value.userHead+"' alt='"+value.userName+"''/> </a>"
												+ "<p class='sms'><a>"+ value.userName+ "</a>"+ " : <span class='comment_title'>"
												+ value.title+ "</span><span>&nbsp;&nbsp;&nbsp;打分："
												+ "<b style='color: red;'>"+ value.rank
												+ "</b> </span></p>"+ "<p class='sms'>"
												+ value.content+ "<span>&nbsp;&nbsp;&nbsp;"
												+ value.time+ "</span>"
												+ "</p></li>";
							$(".comment_list").append(commnetHtml);
						});
					}
				});
				$(this).addClass("c");
				$(this).siblings().removeClass("c");//同级元素去掉"c"样式
			});

			$("#buy").click(function() {
				var goodsId = $("#goodsId").html().trim();
				var userName = $("#userName").html().trim();
				buy(userName, goodsId);//buy函数写在GlobalFunction中
			});
		
			$("#sure_comment").click(function() {
				var goodsId = $("#goodsId").html().trim();
				var title = $("#comment_title").val();
				if(title==""){
					alert("评论标题必须输入");
					return;
				}
				var content = $("#comment_content").val().trim();
				if(content==""){
					alert("评论内容必须输入");
					return;
				}
				var score = $("#comment_score").html().trim();
				//alert(score.substring(8,9));
				//return;
				if(score==""){
					alert("请给该商品打分");
					return;
				}
				var userName =$("#userName").html().trim();
				if(userName=="null"){
					alert("你还没登录，请登录后评论");
					return;
				}
				
				$.ajax({
					type : "POST",
					url : "servlet/CommentServlet",
					data : "action=add&goodsId="+ goodsId+ "&userName="+userName+"&title="+title+"&content="+content+"&score="+score.substring(8,9),
					success : function(result) {
						if("success"==result){
							window.location.reload();
						}else{
							alert("评论失败了");
						}
					}
				});
			});
	});
	</script>
</body>
</html>
